<template>
  <div class="content">
    <div class="elTable" ref="tableDataRef">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="初面" name="first">
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <el-form
                :inline="true"
                :model="formInline"
                ref="searchFormRef"
                class="demo-form-inline"
              >
                <el-form-item prop="buId">
                  <el-select
                    v-model="formInline.buId"
                    clearable
                    placeholder="请选择需求部门"
                    style="width: 220px"
                  >
                    <el-option
                      v-for="item in buIdOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="name">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入需求岗位"
                    clearable
                    style="width: 220px"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                  <el-button type="primary" @click="handleRefresh"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <TabTable
              class="tabTable"
              :phase="formInline.phase"
              :isShowBtn="true"
              :tableData="noteTableData"
              :pagination="pagination"
              @handleClick="handleInfo"
              @handleAdd="handleAdd"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
            ></TabTable>
          </div>
        </el-tab-pane>
        <el-tab-pane label="复面" name="second">
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <el-form
                :inline="true"
                :model="formInline"
                ref="searchFormRef"
                class="demo-form-inline"
              >
                <el-form-item prop="buId">
                  <el-select
                    v-model="formInline.buId"
                    clearable
                    placeholder="请选择需求部门"
                    style="width: 220px"
                  >
                    <el-option
                      v-for="item in buIdOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="name">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入需求岗位"
                    clearable
                    style="width: 220px"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                  <el-button type="primary" @click="handleRefresh"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <TabTable
              class="tabTable"
              :phase="formInline.phase"
              :isShowBtn="false"
              :tableData="noteTableData"
              @handleAdd="handleAdd"
              @handleClick="handleInfo"
              :pagination="pagination"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
            ></TabTable>
          </div>
        </el-tab-pane>
        <el-tab-pane label="面试结束" name="third">
          <div class="tabInfo">
            <div class="search">
              <!-- 搜索按钮操作 -->
              <el-form
                :inline="true"
                :model="formInline"
                ref="searchFormRef"
                class="demo-form-inline"
              >
                <el-form-item prop="buId">
                  <el-select
                    v-model="formInline.buId"
                    clearable
                    placeholder="请选择需求部门"
                    style="width: 220px"
                  >
                    <el-option
                      v-for="item in buIdOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="name">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入需求岗位"
                    clearable
                    style="width: 220px"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                  <el-button type="primary" @click="handleRefresh"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>

            <TabTable
              class="tabTable"
              :phase="formInline.phase"
              :isShowBtn="false"
              :tableData="noteTableData"
              @handleAdd="handleAdd"
              @handleClick="handleInfo"
              :pagination="pagination"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
            ></TabTable>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import TabTable from "../components/tabTable.vue";
import { onMounted, reactive, ref } from "vue";
import {
  searchDepyList,
  jobApplicationList,
} from "@/api/recruitment/jobApplication/index.js";
import { useRouter } from "vue-router";

const router = useRouter();
const tableDataRef = ref(null);
// 定义存储距离的变量
const distanceToTop = ref(0);
const activeName = ref("first");

// 初始搜索表单数据
const initialFormInline = {
  buId: "",
  name: "",
  phase: 1,
  pageSize: 10,
  pageNum: 1,
};
const formInline = reactive({ ...initialFormInline });

const buIdOptions = reactive([]);
const noteTableData = ref([]);

// 查看信息面试类型
const interviewType = ref("初面");
const compileType = ref("");
const pagination = reactive({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  formInline.buId = initialFormInline.buId;
  formInline.name = initialFormInline.name;
  noteTableData.value = [];
  pagination.total = 0;
  pagination.page = 1;
};

onMounted(() => {
  // 获取元素相对于视口的位置
  const rect = tableDataRef.value.getBoundingClientRect();
  console.log("rect", rect, tableDataRef.value.offsetHeight);

  // 计算元素到页面顶部的绝对距离
  distanceToTop.value = rect.top + window.scrollY;
  console.log("distanceToTop", distanceToTop.value);

  getDemandDetailsList();
  getJobList();
});
const getJobList = () => {
  jobApplicationList(formInline).then((res) => {
    if (res.rows && res.rows.length > 0) {
      console.log(res.total, "res.total");
      noteTableData.value = res.rows;
      pagination.total = res.total || 0;
    } else {
      noteTableData.value = [];
      pagination.total = 0;
    }
  });
};

const sizeChange = (size) => {
  formInline.pageNum = 1;
  formInline.pageSize = size.limit;
  pagination.page = 1;
  pagination.limit = size.limit;
  getJobList();
};
const currentChange = (page) => {
  formInline.pageNum = page.page;
  formInline.pageSize = pagination.limit;
  pagination.page = page.page;
  getJobList();
};

const handleTabClick = (tab) => {
  if (tab.props.label == "初面") {
    sessionStorage.setItem("phase", 1);
    formInline.phase = 1;
    interviewType.value = "初面";
  } else if (tab.props.label == "复面") {
    sessionStorage.setItem("phase", 2);
    formInline.phase = 2;
    interviewType.value = "复面";
    compileType.value = "edit";
  } else if (tab.props.label == "面试结束") {
    formInline.phase = 3;
    interviewType.value = "面试结束";
    sessionStorage.setItem("phase", 3);
  }
  // 重置状态
  resetTabState();
  getJobList();
};
const handleInfo = (row) => {
  console.log(row);
  router.push({
    path: "/recruitment/RecruitmentProcessFirstView",
    query: {
      id: row.id,
      interview: interviewType.value,
    },
  });
};
// 编辑 ;
const handleAdd = (row) => {
  router.push({
    path: "/recruitment/RecruitmentProcessFirstAdd",
    query: {
      id: row.id,
      interview: interviewType.value,
      compileType: compileType.value,
    },
  });
};
const handleQuery = () => {
  getJobList();
};
const handleRefresh = () => {
  // 重置表单字段
  Object.keys(formInline).forEach((key) => {
    formInline[key] = initialFormInline[key];
  });
  // 重置分页
  pagination.page = 1;
  pagination.limit = 10;
  pagination.total = 0;
  // 重新查询
  getJobList();
};
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();

  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
